<template>
    <div>
        <div class="context">
            <div>
                <h1 class="h1_title_big">基于ResNet与迁移学习</h1>
                <h1 class="h1_title_big">中药材图像识别算法及Web 应用</h1>
                <p class="h1_title">上传图片就能自动识别中草药并显示相应信息！</p>
            </div>
            <div>
                <a @click="jump">
                <div class="jump_button">
                    <img src="../assets/leaf.png"/>
                    <div class="text_info">
                        <h1>免费识别</h1>
                        <p>准确率高、信息全</p>
                    </div>
                    <div>
                        <img class="right_arrows" src="../assets/右箭头.png"/>
                    </div>
                </div>
                </a>
            </div>
        </div>
        <div>
            <el-carousel :interval="4000" type="card" height="265.6px">
                <el-carousel-item v-for="url in urls" :key="url">
                    <!-- <h3 class="medium">{{ item }}</h3> -->
                    <img :src="require('../'+url)" style="height: 272.8px; width: auto;"/>
                    <img :src="require('../'+url)" style="height: 272.7px; width: auto;"/>
                </el-carousel-item>
            </el-carousel>
        </div>
    </div>
  </template>
  <script>
  export default {
    data(){
        return{
            urls:[
                "assets/lavender.jpg",
                "assets/lotusLeaf.jpg",
                "assets/PurpleFlowers.jpg",
                "assets/sakura.jpg",
                "assets/sunFlower.jpg"
            ]
        }
    },
    methods:{
        jump(){
            if(this.$route.path !== "/imageIdentification" ) {
                this.$router.push("/imageIdentification")
            }
        }
    }
  }
  </script>
  <style lang="less" scoped>
    .context{
        margin: 40px auto;
        width: 80%;
        text-align: center;
        .jump_button{
            margin: auto;
            cursor: pointer;
            height: 64px; 
            width: 370px; 
            border-radius:15px;
            background-color: rgb(0, 12, 41);
            display: flex;
            .text_info{
                margin-left: 30px;
                margin-right: 120px;
            }
            .right_arrows{
                margin-top: 15px;
                width: 30px;
                height: auto;
            }
            h1{
                text-align: left;
                color: #fff;
                font-size: 18px;
                margin: 5px;
            }
            p{
                font-size: 12px;
                color: #eee;
            }
        }
        .h1_title_big{
            margin: 10px;
            font-size: 60px;
            font-weight: 550;
            font-style: normal;
        }
        .h1_title{
            margin: 40px;
            color: #666;
            font-size: 20px;
            font-style: normal;
        }
    }
    .el-carousel__item h3 {
      color: #475669;
      font-size: 14px;
      opacity: 0.75;
      line-height: 200px;
      margin: 0;
    }
    
    .el-carousel__item:nth-child(2n) {
      background-color: #99a9bf;
    }
    
    .el-carousel__item:nth-child(2n+1) {
      background-color: #d3dce6;
    }
  </style>